<template>
  <div class="home">
    <h3>编辑推荐</h3>
    <Loading v-if="personListLoading"></Loading>
    <ul class="personList" v-else>
      <Personalized
        v-for="item in personalizeds"
        :key="item.id"
        :item="item"
        @click.native="$router.push('/RankDetails?id=' + item.id)"
      ></Personalized>
    </ul>
    <h3>最新音乐</h3>
    <Loading v-if="newsongListLoading"></Loading>
    <ul class="newsongList" v-else>
      <Newsong
        v-for="item in newsongs"
        :key="item.id"
        :item="item"
        @play-song="$emit('play-song', $event, newsongs)"
        :selectedSong="selectedSong"
        :playingStatus="playingStatus"
      ></Newsong>
    </ul>
  </div>
</template>

<script>
import Personalized from "@/components/Personalized.vue";
import Newsong from "@/components/Newsong.vue";
import Loading from "@/components/Loading.vue";

export default {
  name: "Home",
  props: ["selectedSong", "playingStatus"],
  data: function () {
    return {
      personalizeds: [],
      newsongs: [],
      songList: [],
      personListLoading: true,
      newsongListLoading: true,
    };
  },
  components: {
    Personalized,
    Newsong,
    Loading,
  },
  created: function () {
    this.axios
      .get("https://apis.netstart.cn/music/personalized?limit=6")
      .then((res) => {
        this.personalizeds = res.data.result;
        this.personListLoading = false;
      });
    this.axios
      .get("https://apis.netstart.cn/music/personalized/newsong?limit=10")
      .then((res) => {
        this.newsongs = res.data.result;
        this.newsongListLoading = false;
      });
  },
};
</script>

<style lang="less" scoped>
@import "../assets/item.less";
.home {
  padding-top: 20px;
  background-color: #fff;
  h3 {
    border-left: 2px solid @red;
    padding-left: 5px;
    height: 15px;
    line-height: 15px;
    margin-bottom: 14px;
    font-size: 17px;
  }
  .personList {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 24px;
    .personalized {
      flex-basis: 30vw;
      flex-grow: 1;
      &:nth-child(3n + 2) {
        margin: 0 3px;
      }
    }
  }
}
</style>
